<template>
  <div class="contact-us-phone">
    <div class="contact-info">
      <p class="title">联系方式</p>
      <ul class="contact-phone">
        <li>服务热线：027-86698530</li>
        <li>联系电话：186 8808 3160</li>
        <li>E-mail：81644348@qq.com</li>
        <li>地址：湖北省武汉市东湖高新区汤逊湖北路38号光谷总部空间7栋1单元413室</li>
      </ul>
      <!--<p class="address"></p>-->
      <div class="map-container">
        <iframe src="../../../static/bmap.html" frameborder="0" width="100%" height="460px" scrolling="no"></iframe>
      </div>
    </div>
    <div class="join-us">
      <p class="title">招聘信息</p>
      <div class="top">
        <div><img src="../../assets/contactUs/main_icon_xuewei.png" alt=""><p>校园招聘</p></div>
        <div><img src="../../assets/contactUs/main_icon_shehui.png" alt=""><p>社会招聘</p></div>
      </div>
      <p class="summary">人才理念：尊重人才真心真意，服务人才全心全意，培养人才一心一意，使用人才诚心诚意。</p>
    </div>
    <div class="online-message">
      <div class="title">在线留言</div>
      <div class="onLineTitle">在线留言</div>
      <div class="details">
        <Form ref="formValidate" label-position="right" :label-width="100" style="width: 300px" :model="formValidate" :rules="ruleValidate">
          <FormItem label="留言内容"  prop="msg">
            <Input type="textarea" :autosize="{minRows: 6,maxRows: 10}" v-model="formValidate.msg"></Input>
          </FormItem>
          <FormItem label="姓名" prop="name">
            <Input type="text" v-model="formValidate.name"></Input>
          </FormItem>
          <FormItem label="性别" prop="gender">
            <RadioGroup v-model="formValidate.gender">
              <Radio label="male">男</Radio>
              <Radio label="female">女</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="手机" prop="phone">
            <Input v-model="formValidate.phone"></Input>
          </FormItem>
          <FormItem label="电话" prop="telephone">
            <Input v-model="formValidate.telephone"></Input>
          </FormItem>
          <FormItem label="传真" prop="fax">
            <Input v-model="formValidate.fax"></Input>
          </FormItem>
          <FormItem label="邮箱" prop="Email">
            <Input v-model="formValidate.Email"></Input>
          </FormItem>
          <FormItem label="地址" prop="address">
            <Input v-model="formValidate.address"></Input>
          </FormItem>
          <FormItem label="邮编" prop="postalCode">
            <Input v-model="formValidate.postalCode"></Input>
          </FormItem>
          <FormItem>
            <Button type="default" @click="submitBtn('formValidate')">提交</Button>
          </FormItem>
        </Form>
      </div>


    </div>
  </div>
</template>

<script>
  export default {
    name: "contact-us-phone",
    data() {
      return {
        formValidate: {
          msg: '',
          name: '',
          gender: 'male',
          phone: '',
          telephone: '',
          fax: '',
          Email: '',
          address: '',
          postalCode: '',
          code: ''
        },
        ruleValidate: {
          msg: [
            {required: true, type: 'string', message: '请填写您的留言', trigger: 'blur'}
          ],
          name: [
            {required: true, type: 'string', message: '请填写您的名字', trigger: 'blur',}
          ],
          gender: [
            {trigger: 'change',},
          ],
          phone: [
            {required: true, message: '请填写您的手机号码', trigger: 'blur',},
            {
              type: 'number', message: '请输入数字格式', trigger: 'blur', transform(value) {
                return Number(value);
              }
            }
          ],
          telephone: [
            {type: 'string', trigger: 'blur',}
          ],
          fax: [
            {type: 'string', message: '', trigger: 'blur',},
          ],
          Email: [
            {type: 'email', message: 'eeee', trigger: 'blur',},
          ],
          address: [
            {type: 'string', message: '', trigger: 'blur',},
          ],
          postalCode: [
            {type: 'string', message: '', trigger: 'blur',}
          ],
          code: [
            {type: 'string', message: '', trigger: 'blur',}
          ]
        }
      }
    },
    methods: {
      submitBtn(name) {
        // console.log(this.$refs[name].model);
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!');
            this.$refs[name].resetFields();
          } else {
            this.$Message.error('提交失败!');
          }
        })

      },
    },
  }
</script>

<style scoped lang="less">
  .contact-us-phone{
    .title{
      font-size: 22px;
      color:#4bb2df;
      text-align: center;
    }
    .contact-info{
      text-align: center;
      padding:40px 0.9% 30px 0.9%;
      .contact-phone{
        font-size: 18px;
        padding-bottom: 30px;
        li{
          margin-top: 30px;
        }
        li:nth-of-type(1):before{
          width: 17px;
          height: 16px;
          background: url("../../assets/contactUs/main_contact_icon_phone.png");
        }
        li:nth-of-type(2):before{
          width: 12px;
          height: 18px;
          background: url("../../assets/contactUs/main_contact_icon_mobilephone.png");
        }
        li:nth-of-type(3):before{
          width: 18px;
          height: 13px;
          background: url("../../assets/contactUs/main_contact_icon_email.png");
        }
        li:nth-of-type(4):before{
          width: 15px;
          height: 19px;
          background: url("../../assets/contactUs/main_contact_icon_address.png");
        }
      }
      li:before{
        content: '';
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
      }
      .map-container{
        width: 100%;
        height: 460px;
        box-sizing: border-box;
      }
    }

    .join-us{
      .top{
        padding-top: 22px;
        img{
          display: block;
          margin: 0 auto;
          padding: 75px 0 9px 0;
        }
        div{
          margin: 0 auto;
        }
        div:nth-of-type(1){
          width: 368px;
          height: 197px;
          background: url("../../assets/contactUs/main_pic_xiaoyuan.png");
        }
        div:nth-of-type(2){
          width: 368px;
          height: 197px;
          background: url("../../assets/contactUs/main_pic_shehui.png");
          margin-top: 10px;
        }
        p{
          font-size: 22px;
          color: #fff;
          text-align: center;
          letter-spacing: 4px;
        }
      }
      .summary{
        font-size: 18px;
        color: #4bb2df;
        padding: 30px 16px;
      }
    }

    .online-message {
      padding: 0 1.4% 20px 1.4%;
      .onLineTitle {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        margin-top: 30px;
      }
      .details {
        border: 2px solid #ccc;
        padding-top: 50px;
        span{
          display: inline-block;
          height: 100%;
          width: 30%;
          cursor: pointer;
        }
      }
    }
  }
</style>
<style>
  @import "onlinaMessage.css";
</style>
